<template>
	<view class="vip-card">
		<view class="back" @click="navTo">
			<view class="iconfont iconfanhui"></view>
		</view>
		<view class="top-one">
			<view class="scro">
				<view class="member">
					<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
						<view class="scroll-view-item_H tit">
							<view class="text u-skeleton-fillet">
								<view>专</view>
								<view>属</view>
								<view>律</view>
								<view>师</view>
							</view>
						</view>
						<view class="scroll-view-item_H" v-for="(item, index) in exclusiveLawyer.lawyers" :key="index">
							<image class="avatar u-skeleton-circle" :src="item.avatar || require('../../static/images/avatar.png')" mode=""></image>
							<view class="name u-skeleton-fillet">{{ item.nickname }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="top-two">
			<image src="https://oss.arapp.net/img/vip_02.png" mode=""></image>
		</view>
		<view class="top-three">
			<image src="https://oss.arapp.net/img/vip_03.png" mode=""></image>
		</view>
		<view class="top-four">
			<image src="https://oss.arapp.net/img/vip_04.png" mode=""></image>
		</view>
		<view class="top-five">
			<image src="https://oss.arapp.net/img/vip_05.png" mode=""></image>
		</view>
		<view class="introduce">说明:以上权益政策以用户下单时显示的内容为准，会随着版本迭代而产生的细微变化，不做另行通知。</view>
		<view class="pay-btn">
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle" active-color="#ffcdae" style="width: 50rpx;"></u-checkbox>
			</u-checkbox-group>
			<view class="detail">
				<navigator url="/pages/user/privacy?privacy=0">
					<text>《私人法律顾问用户协议》</text>
					<text> 查看详情</text>
				</navigator>
			</view>
			<view class="btn" @click="pay">
				<text>购买</text>
				<text>¥</text>
				<text>{{ parseInt(money.price) }}</text>
				<text>/年</text>
				<text>¥{{ parseInt(money.original_price) }}</text>
			</view>
		</view>
		<popup-pay :popShow="popShow" :money="money" @closePopup="closePopup" @confirmPay="confirmPay"></popup-pay>
	</view>
</template>

<script>
	import { findCardVip } from '@/api/userApi.js'
	import { createdOrderCard, vipCardPay } from '@/api/orderApi.js'
	export default {
		data() {
			return {
				checked: true,
				exclusiveLawyer: [],
				popShow: false,
				btnDisabled: false,
				money: {}, // 弹出的余额和价格
				disabledClick: true, // 点击一次
				memberInfo: {mobile: '点击登录',card: {id: '',end_time: ''}},
			}
		},
		onLoad() {
			this._findCardVip()
		},
		methods: {
			navTo() {
				uni.navigateBack()
			},
			async _findCardVip(item) {
				const res = await findCardVip({cardid: 1})
				console.log(res)
				this.exclusiveLawyer = res.data.data.list
				this.money = res.data.data.list
				this.money.paytypes = {
					wx_pay: "1",
					bl_pay: "0",
					ali_pay: "0"
				}
				console.log(this.money)
				if (item === 'pay') {
					// uni.navigateTo({url: `/pages/lawyer/lawyer-detail?id=${this.exclusiveLawyer.team_id}`})
					uni.navigateTo({url: `/pages/user/vip-pay-success?id=${this.exclusiveLawyer.team_id}`})
				}
			},
			pay() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({title: '请先登录',icon: 'none'})
					setTimeout(() => {
						this._login()
					}, 500)
				} else {
					console.log(this.checked)
					if (!this.checked) return this.$u.toast('请勾选用户协议')
					this.popShow = true
				}
			},
			async _login() {
				if (this.disabledClick) {
					// #ifdef APP-PLUS
					this.disabledClick = false
					const res = await this.$login()
					console.log(res)
					if (res === 'fail') {
						uni.navigateTo({url:'/pages/login/login'})
					}
					setTimeout(() => {
						this.disabledClick = true
					}, 1000)
					// #endif
					// #ifdef H5
					uni.navigateTo({url:'/pages/login/login'})
					// #endif
				} else {
					return
				}
			},
			closePopup(data) {
				console.log(data)
				this.popShow = data
				this.btnDisabled = false
			},
			async confirmPay(e) {
				console.log(e)
				this.popShow = e.popShow
				uni.showLoading({title: '加载中...'})
				const res = await createdOrderCard({cardid: 1}) // 下单
				console.log(res)
				const result = await vipCardPay({id: res.data.data.order.id-0, paytype: e.paymentWay}) // 支付
				console.log(result)
				
				if (res.data.data.order.amount == 0) {
					uni.setStorageSync('isLogin', true)
					uni.setStorageSync('isRefresh', true)
					uni.navigateBack()
					return 
				}
				// #ifdef APP-PLUS
				if (e.paymentWay === 3) {
					// 微信支付
					this.$utils.appWxPay(result.data.data.appConfig, (success)=> {
						console.log(success)
						uni.setStorageSync('isLogin', true)
						uni.setStorageSync('isRefresh', true)
						this._findCardVip('pay')
						// setTimeout( () => {
						// 	uni.switchTab({url: '/pages/user/user'})
						// }, 300)
						// uni.navigateTo({url: `/pages/user/vip-pay-success`})
						// uni.navigateBack()
						// uni.navigateTo({url: '/pages/order/pay-success'})
					}, (error) => {
						console.log(error)
					})
				} else if (e.paymentWay === 2) {
					console.log('支付宝支付')
				} else if (e.paymentWay === 1) {
					console.log('余额支付')
				}
				// #endif
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #050c1e;
		padding-bottom: 140rpx;
	}
	.back {
		position: fixed;
		top: 36px;
		left: 20px;
		z-index: 999;
		.iconfanhui {
			color: #fff;
			font-size: 42rpx;
		}
	}
	.top-one {
		background: url('https://oss.arapp.net/img/vip_01.jpg') no-repeat center;
		background-size: 100%;
		height: 786rpx;
		position: relative;
		.scro {
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
		.member {
			border-radius: 10rpx;
			.scroll-view_H {
				white-space: nowrap; // 滚动必须加的属性
				width: 584rpx;
				background-color: #ffcdae;
				height: 160rpx;
				border-radius: 10rpx;
				position: relative;
				padding-right: 8rpx;
				.scroll-view-item_H {
					display: inline-block;
					width: 90rpx;
					margin: 0 10rpx;
					font-size: 24rpx;
					text-align: center;
					margin-top: 20rpx;
					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
					.name {
						font-size: 24rpx;
						color: #222c42;
						// padding-top: 8rpx;
					}
				}
				.tit {
					width: 60rpx !important;
					.text {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						font-size: 26rpx;
						height: 160rpx;
						width: 60rpx;
						// background-image: linear-gradient(0deg,#fed7bf 0%,#ffe9db 100%);
						background-image: linear-gradient(to right,#fed7bf, #ffe9db);
						color: #222c42;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						border-radius: 10rpx 0 0 10rpx;
						z-index: 1;
						font-weight: 800;
					}
				}
			}
		}
	}
	.top-two,
	.top-three,
	.top-four,
	.top-five {
		margin-top: 50rpx;
		image {
			height: 260rpx;
			width: 100%;
		}
	}
	.introduce {
		font-size: 22rpx;
		color: #d1b4a3;
		padding: 10rpx 30rpx 0;
		line-height: 38rpx;
	}
	.pay-btn {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #050c1e;
		.detail {
			navigator {
				display: flex;
				flex-direction: column;
				text:first-child {
					font-size: 24rpx;
					color: #ffcdae;
				}
				text:last-child {
					font-size: 22rpx;
					color: #a4a4a4;
					padding-left: 10rpx;
				}
			}
		}
		.btn {
			height: 90rpx;
			background-image: linear-gradient(to right,#fadac6,#f5c6a8);
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-left: auto;
			font-weight: 800;
			&:active {
				opacity: .9;
			}
			text:nth-child(1) {
				font-size: 30rpx;
				color: #6b451e;
			}
			text:nth-child(2) {
				font-size: 22rpx;
				color: #6b451e;
				padding: 6rpx 2rpx 0 10rpx;
			}
			text:nth-child(3) {
				font-size: 36rpx;
				color: #6b451e;
			}
			text:nth-child(4) {
				font-size: 22rpx;
				color: #6b451e;
				padding: 0 6rpx 0 4rpx;
			}
			text:nth-child(5) {
				font-size: 22rpx;
				color: #6b451e;
				opacity: 0.5;
				text-decoration: line-through;
			}
		}
	}
</style>
